<template>
  <div
    class="nsw-container"
    v-loading="loading"
    style="width: 90%; margin: auto; min-height: 500px"
  >
    <h1 style="margin: 40px 0">需求管理</h1>
    <div class="task_list">
      <div class="tableBar">
        <el-input
          v-model="title"
          placeholder="请输入标题"
          clearable
          style="width: 250px"
        ></el-input>
        <el-date-picker
          v-model="taskTime"
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          placeholder="选择日期"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          style="width: 400px; margin-left: 20px"
          @change="handleDatePickerChange"
        ></el-date-picker>
        <el-button
          type="primary"
          class="search-btn"
          @click="handleQuery"
          style="margin-left: 20px"
        >
          查询
        </el-button>
        <el-button type="primary" style="float: right" @click="add">
          + 新建需求
        </el-button>
      </div>
      <el-table
        :data="tableData"
        stripe
        class="tableBox"
        style="margin-top: 20px"
      >
        <el-table-column
          label="序号"
          align="center"
          width="55"
          type="index"
        ></el-table-column>
        <el-table-column prop="title" label="任务标题"></el-table-column>
        <el-table-column prop="status" label="任务状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">待处理</span>
            <span v-if="scope.row.status === 2">进行中</span>
            <span v-if="scope.row.status === 3">已完成</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="订单总金额"></el-table-column>
        <el-table-column prop="deposit" label="订单定金"></el-table-column>
        <el-table-column
          prop="deadline"
          label="任务截止日期"
          min-width="100"
          :formatter="formatDate"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建任务时间"
          :formatter="formatDate"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          :formatter="formatDate"
          label="更新任务时间"
          min-width="100"
        ></el-table-column>
        <el-table-column prop="btn" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="goDetail(scope.row)" class="blueBug">
              查看
            </el-button>
            <el-button type="text" @click="editHandle(scope.row)">
              修改
            </el-button>
            <el-button type="text" @click="deleteHandle(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        :current-page.sync="page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align: center; margin: 30px 0"
      ></el-pagination>
      <div class="core-content">
        <el-dialog
          :title="title"
          :visible.sync="open"
          width="1050px"
          top="0"
          :close-on-click-modal="false"
        >
          <div class="sketch-content">
            <template v-if="isEdit">
              <add-order
                :open.sync="open"
                :order-data="diaForm"
                @getlist="getList"
              ></add-order>
            </template>
            <template v-else>
              <add-order :open.sync="open" @getlist="getList"></add-order>
            </template>
          </div>
        </el-dialog>
      </div>
    </div>
    <el-dialog
      :visible="dialogVisible"
      title="查看订单"
      width="1200px"
      @close="dialogVisible = false"
    >
      <el-form :model="diaForm" label-width="120px" label-position="left">
        <el-form-item label="订单标题">{{ diaForm.title }}</el-form-item>
        <el-form-item label="任务状态">
          {{ diaForm.status | statusFormatter }}
        </el-form-item>
        <el-form-item label="订单总金额">{{ diaForm.amount }}</el-form-item>
        <el-form-item label="订单订金">{{ diaForm.deposit }}</el-form-item>
        <el-form-item label="订单成本价">{{ diaForm.cost }}</el-form-item>
        <el-form-item label="订单截止时间">
          {{ diaForm.deadline | formatDate }}
        </el-form-item>
        <el-form-item label="订单创建时间">
          {{ diaForm.createTime | formatDate }}
        </el-form-item>
        <el-form-item label="订单更新时间">
          {{ diaForm.updateTime | formatDate }}
        </el-form-item>
        <el-form-item label="服装的功能性描述">
          {{ diaForm.functionality }}
        </el-form-item>
        <el-form-item label="服装类型">
          {{ diaForm.gender === 0 ? "女装" : "男装" }}
        </el-form-item>
        <el-form-item label="设计师等级">{{ diaForm.level }}</el-form-item>
        <el-form-item label="服装的面料">{{ diaForm.material }}</el-form-item>
        <el-form-item label="服装的最大适配年龄">
          {{ diaForm.maxAge }}
        </el-form-item>
        <el-form-item label="服装的最小适配年龄">
          {{ diaForm.minAge }}
        </el-form-item>
        <el-form-item label="服装具体描述">{{ diaForm.require }}</el-form-item>
        <el-form-item label="服装风格">{{ diaForm.style }}</el-form-item>
        <el-form-item label="服装属于类型">
          {{ diaForm.types | typesFormatter }}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import AddOrder from "@/views/order/addOrder.vue"
import { getOrderDetailPage, deleteOrder, getOrderDetail } from "@/api/order"

export default {
  name: "Order",
  components: { AddOrder },
  filters: {
    statusFormatter(val) {
      switch (val) {
        case 1:
          return "待处理"
        case 2:
          return "进行中"
        case 3:
          return "已完成"
      }
    },
    typesFormatter(val) {
      if (!val) return
      const arr = [
        { value: 1, name: "内衬" },
        { value: 2, name: "上衣" },
        { value: 3, name: "外套" },
        { value: 4, name: "裤装" },
        { value: 5, name: "裙装" },
        { value: 6, name: "套装" },
      ]
      return arr.find((item) => item.value === val).name
    },
    formatDate(date) {
      if (!date) return
      date = new Date(date)
      var Y = date.getFullYear() + "-"
      var M = addZero(date.getMonth() + 1) + "-"
      var D = addZero(date.getDate()) + " "
      var h = addZero(date.getHours()) + ":"
      var m = addZero(date.getMinutes()) + ":"
      var s = addZero(date.getSeconds())
      return Y + M + D + h + m + s
    },
  },
  data() {
    return {
      title: null,
      input: "",
      taskTime: "",
      create_time: null,
      update_time: null,
      counts: 0,
      page: 1,
      pageSize: 10,
      tableData: [],
      diaForm: {},
      dialogVisible: false,
      loading: false,
      open: false,
      total: 0,
      isEdit: false,
    }
  },
  watch: {
    taskTime(val) {
      if (val && val.length >= 2) {
        this.create_time = val[0]
        this.update_time = val[1]
      } else {
        this.create_time = null
        this.update_time = null
      }
    },
  },
  mounted() {
    this.getList()
  },
  methods: {
    add() {
      this.isEdit = false
      this.diaForm = {}
      this.open = true
    },
    getList() {
      getOrderDetailPage(this.page, this.pageSize, {
        title: this.title,
        startingTime: this.create_time,
        deadline: this.update_time,
      })
        .then((res) => {
          this.tableData = res.list
          this.total = res.total
        })
        .catch((err) => {
          this.$message.error("请求出错了：" + err)
        })
    },
    handleQuery() {
      this.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    goDetail(row) {
      this.diaForm = {}
      getOrderDetail(row.id).then((res) => {
        this.dialogVisible = true
        this.diaForm = { ...res.order, ...res.orderRequire }
      })
    },
    handleDatePickerChange() {
      if (this.taskTime) {
        console.log(this.taskTime)
      }
    },
    // 删除订单
    deleteHandle(id) {
      this.$confirm("确认删除该条数据吗", "提示", {
        type: "warning",
      })
        .then(() => {
          deleteOrder(id).then((res) => {
            this.$message.success("删除成功")
            this.getList()
          })
        })
        .catch(() => {})
    },
    // 修改订单
    editHandle(row) {
      this.isEdit = true
      getOrderDetail(row.id).then((res) => {
        this.diaForm = { ...res.order, ...res.orderRequire }
        this.open = true
      })
    },
    formatDate(row, column, date) {
      if (!date) return
      date = new Date(date)
      var Y = date.getFullYear() + "-"
      var M = addZero(date.getMonth() + 1) + "-"
      var D = addZero(date.getDate()) + " "
      var h = addZero(date.getHours()) + ":"
      var m = addZero(date.getMinutes()) + ":"
      var s = addZero(date.getSeconds())
      return Y + M + D + h + m + s
    },
  },
}
function addZero(num) {
  return num < 10 ? "0" + num : num
}
</script>
